<template>
  <div>
    <div>111</div>
    <TableContent
      :pagination="pagination"
      :show-selection="true"
      :show-summary="true"
    />
  </div>
</template>
<script>
import Pagination from '@/class/Pagination'
import TableContent from '@/components/Table/Table.vue'
export default {
  components: {
    TableContent
  },
  data() {
    return {
    // 表格key
      tableKey: 1,
      // 表格数据
      tableData: [{
        name: '1233',
        id: 1231231243,
        clue_type: '测试'
      }],
      // 默认表格高度
      tableHeight: 600,
      // 表格展示项配置
      columns: [
        {
          prop: 'name', // 对应列内容的字段名
          label: '姓名', // 显示的标题
          width: 66, // 对应列的宽度
          resizable: true, // 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）
          show: true, // 展示与隐藏
          sortable: false // 对应列是否可以排序
        },
        {
          prop: 'clue_type',
          label: '线索类型',
          width: 78,
          resizable: true,
          show: true,
          sortable: false
        }
      // ... 省略部分字段
      ],
      // 列设置中 tree配置
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  beforeCreate() {
    this.pagination = new Pagination(this, 'GET /v1/server', {
      sortParams: {
        idOrder: 'desc'
      },
      isLazy: true,
      height: -50,
      beforeRes: (res) => {
        console.log('res', res)
      }
    })
  },
  created() {
    this.pagination.turn()
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 判断本地是否有表格配置数据 ？ 加载 :  忽略
      // 获取表格数据
      // 重设表格高度
    },
    allowDrop(draggingNode, dropNode, type) {
      // 仅允许Tree节点上下拖动
      return type !== 'inner'
    },
    // Tree 拖动时更新表格
    handleDrop() {
      this.tableKey++
      // 保存表格配置
      this.saveTableColumns()
    },
    // 重置表格列设置
    resetTable() {
      // ... 忽略
    },
    // 显示隐藏切换 && 保存表格配置
    saveTableColumns() {
      // setStorage 封装了 localStorage
      // setStorage('clueTable', this.columns)
    },
    // 选中表格行
    handelTableClick(row) {
      // ... 省略业务逻辑
    },
    // table多选操作
    handleSelectionChange(val) {
      // ... 省略业务逻辑
    },
    // 表头拖动事件
    surverWidth(newWidth, oldWidth, column, event) {
      this.columns = this.columns.map(v => {
        if (v.prop === column.property) v.width = newWidth
        return v
      })
      this.saveTableColumns()
    },
    // 关注与编辑操作
    clueTableRowClick(val, type) {
      // ... 省略业务逻辑
    }
  }
}

</script>
<style scoped>
.col-container{
  display:flex;
  justify-content: end;
  padding: 5px
}
</style>
